<template>
	<view>
		<!-- 收货地址 -->
		<view class="address">
			<view class="address_info" v-if="addrInfo.username" @click="addressBtn">
				<view class="row">
					<text>收货人： {{addrInfo.username}}</text>
					<text>电话： {{addrInfo.telNumber}}</text>
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view class="row">
					收货地址： {{addrInfo.address}}
				</view>
			</view>
			<view v-else class="address_add">
				<button type="primary" @click="addressBtn">请选择收货地址＋</button>
			</view>
			<image src="../../static/cart_border@2x.png"></image>
		</view>
		<!-- /收货地址 -->
		<!-- 商品 -->
		<view class="goods_list">
			<view class="goods_list_title">
				<uni-icons type="shop" size="18"></uni-icons>
				<text>购物车</text>
			</view>
			<view class="goods_list_content">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item, index) in cart" :key="index" :right-options="swipeOptions"  @click="bindClick(index)" @change="swipeChange($event, index)">
					    <view class="goods_list_item">
					    	<radio :value="item.goods_id" :checked="item.goods_state" color="#C00000" @click="changeRadio(index)"></radio>
					    	<image :src="item.goods_small_logo" mode="widthFix"></image>
					    	<view class="good_info">
					    		<text>{{item.goods_name}}</text>
					    		<view class="priceCount">
					    			<text class="good_price">￥{{item.goods_price | tofixed}}</text>
					    			<view class="count">
					    				<num-box :count="item.goods_count" @numChange="numChangeHandler($event, index)"></num-box>
					    			</view>
					    		</view>
					    	</view>
					    </view>
					</uni-swipe-action-item>
				</uni-swipe-action>
		
			</view>
		</view>
		<!-- /商品 -->
		<!-- 底部结算 -->
		<view class="footer">
			<label class="radio"><radio :checked="isAllChecked" color="#C00000" @click="changeRadioAll"></radio>全选</label>
			<view class="amount">合计：<text class="good_price">￥{{totalPrice | tofixed}}</text></view>
			<text class="toPay" @click="toPay">结算({{totalAmount}})</text>
		</view>
		<!-- /底部结算 -->
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbarBadge.js'
	import { mapState, mapMutations, mapGetters } from "vuex"
	export default {
		mixins: [badgeMix],
		data() {
			return {
				isAllChecked: false,
				timer: null,
				n: 4,
				swipeOptions:[
				        {
				            text: '确认',
				            style: {
				                backgroundColor: '#dd524d',
								padding: 0
				            }
				        }
				      ]
			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapState('m_user', ['addrInfo']),
			// 选中的总价格
			totalPrice() {
				let amount = 0
				this.cart.forEach(x => {
					if (x.goods_state) amount += x.goods_count * x.goods_price
				})
				return amount
			},
			// 选中的总数量
			totalAmount() {
				let amount = 0
				this.cart.forEach(x => {
					if (x.goods_state) amount += x.goods_count
				})
				return amount
			}
		},
		watch: {},
		onLoad() {},
		methods: {
			...mapMutations('m_user', ['setAddress', 'updateRedirectInfo']),
			...mapMutations('m_cart', ['saveToStorage']),
			changeRadio(index) {
				this.cart[index].goods_state = !this.cart[index].goods_state
				this.saveToStorage()
			},
			numChangeHandler(e, index) {
				this.cart[index].goods_count = e
				this.saveToStorage()
			},
			changeRadioAll() {
				this.isAllChecked = !this.isAllChecked
				this.cart.forEach(x => {
					if (this.isAllChecked) {
						x.goods_state = true
					} else {
						x.goods_state = false
					}
					
				})
			},
			// 组件打开或关闭时触发
			swipeChange(e, i) {
				console.log(e, i)
			},
			// 点击删除按钮
			bindClick(index) {
				this.cart.splice(index, 1)
				this.saveToStorage()
			},
			// 去选择地址
			addressBtn() {
				var that = this
				uni.authorize({
					scope: 'scope.address',
					success() {
						uni.chooseAddress(
							{
								success(res) {
									if (res.errMsg === "chooseAddress:ok") {
										that.setAddress(res)
									}
									
								},
								fail(res) {
									if (res.errMsg === 'chooseAddress:fail auth deny') {
									}
								},
							}
						)
					}
				})
				
			},
			reAuth() {},
			toPay() {
				var that = this
				if (!this.totalAmount) return uni.showMsg('还未选择商品')
				if (JSON.stringify(this.addrInfo) === '{}') return uni.showMsg('还未选择地址')
				if (this.token) {
					uni.showToast({
						icon: 'none',
						title: "您还未登录",
						mask: true,
						duration: 1000
					})
					this.timer = setInterval(()=> {
						this.n--
						this.showCountDown(this.n)
						if (this.n === 0) {
							clearInterval(this.timer)
							this.n = 4
							uni.switchTab({
								url: '/pages/my/my',
								success: function() {
									that.updateRedirectInfo({
										// 跳转的方式
										openType: 'switchTab',
										// 从哪个页面跳转过去的
										from: '/pages/cart/cart'
									})
								}
							})
						}
					}, 1000)
					return
				}
				// 创建订单
				this.payOrder()
			},
			showCountDown(n) {
				uni.showToast({
					icon: 'none',
					title: n + '秒后自动跳转',
					mask: true,
					duration: 1000
				})
			},
			async payOrder() {
				console.log(this.cart)
				const goodsInfo = this.cart.filter(item => item.goods_state === true).map(item => {
					return {
						goods_id: item.goods_id,
						goods_number: item.goods_count,
						goods_price: item.goods_price
				}
				})
				
				console.log(goodsInfo)
				const orderInfo = {
					goods: goodsInfo,
					consignee_addr: this.addrInfo,
					order_price: this.totalPrice
				}
				const { data } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
				console.log(data)
			}
			
			
		}
	}
</script>

<style lang="scss">
.address {
	position: relative;
	height: 220rpx;
	.address_info {
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 0 20px;
		font-size: 14px;
		.row {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}
	.address_add {
		height: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	image {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 5px;
		width: 100%;
	}
}
.goods_list {
	padding: 10px;
	padding-right: 0;
	padding-bottom: 60px;
	.goods_list_title {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
		uni-icons {
			margin-right: 5px;
			vertical-align: middle;
		}
	}
	.goods_list_content {
		.goods_list_item {
			width: 100%;
			padding-bottom: 10px;
			display: flex;
			align-items: center;
			radio {
				width: 10%
			}
			image {
				width: 20%
			}
			.good_info {
				width: 70%;
				padding-top: 10px;
				padding-left: 15px;
				padding-right: 10px;
				.priceCount {
					padding-top: 28px;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	height: 60px;
	line-height: 60px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #F8F8F8;
	.radio {
		flex: 2;
		padding-left: 10px
	}
	.amount {
		flex: 3;
		.good_price {
			font-size: 16px!important;
		}
	}
	.toPay {
		flex: 2;
		text-align: center;
		background-color: #c00000;
		color: #fff;
	}
	
}
</style>
